<template>
	<view class="search">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="searchInput">
			<view class="search-top">
				<view class="icon">
					<uni-icons type="left" size="30" @click="HandleReturn" style="margin-right: 20rpx;"></uni-icons>
				</view>
				<view class="title">今 日 维 保</view>
			</view>
			<view class="search-tabs">
				<up-tabs :list="taskTabList" @click="tabbarChange" :scrollable="false" lineColor="#325EF5"
					activeStyle="color:#000" inactiveStyle="opcity: 0.8"></up-tabs>
			</view>
		</view>
		<Tasks :type='2' :innerHeight="'88vh'" :lists="todayList" :isLoading="isLoading" @getList="getTodayLists">
		</Tasks>
	</view>
</template>

<script setup>
	import toSafe from '@/compoents/top-safe.vue'
	import {
		getTodayTasks,
	} from '@/api/home.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	let taskTabList = reactive([{
			id: 0,
			name: '全部',
			isChecked: true,
			execStatus: '',
		},
		{
			id: 1,
			name: '进行中',
			isChecked: false,
			execStatus: 1,
		},
		{
			id: 3,
			name: '待审批',
			isChecked: false,
			execStatus: 3,
		},
		{
			id: 6,
			name: '已完成',
			isChecked: false,
			execStatus: 6
		},
	])
	let isLoading = ref(false)
	const titleSearch = ref('')
	let todayList = reactive([])
	let params = reactive({
		execStatus: ''
	})
	onMounted(() => {})
	onLoad(e => {
		console.log(e, 'wwwww');
		titleSearch.value = e.title
		getTodayLists()
	})
	// 获取今日任务列表
	const getTodayLists = () => {
		isLoading.value = true
		getTodayTasks(params.execStatus).then(res => {
			if (res.code = 200) {
				todayList.splice(0, todayList.length, ...res.rows)
				if (titleSearch.value) {
					todayList = todayList.filter(el => el.planName == titleSearch.value)
				}
			}
			isLoading.value = false
		})
	}
	// 今日维保任务tabbar切换
	const tabbarChange = item => {
		taskTabList.map(i => {
			i.isChecked = false
		})
		item.isChecked = true
		params.execStatus = item.execStatus
		getTodayLists()
	}
	const reachChange = () => {
		getTodayLists()
	}
	const HandleReturn = () => {
		// uni.navigateBack({
		// 	delta: 1
		// });
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.search {
		width: 100%;
		height: 100%;
		background: #F6F8FA;
		overflow: hidden;

		.searchInput {
			width: 100%;
			height: 176rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #fff;

			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 0 20rpx;
			z-index: 99;

			.search-top {
				.inline_center();
				height: 88rpx;
				width: 100%;
				// display: flex;
				// align-items: center;

				.icon {
					width: 10vw;
					height: 88rpx;
					line-height: 88rpx;
					z-index: 1;
				}

				.title {
					width: 90vw;
					line-height: 88rpx;
					height: 88rpx;
					text-align: center;
					margin-left: -8vw;
					font-size: 34rpx;
					font-weight: 700;
				}
			}

			.search_icons {
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}

			.search-tabs {
				.inline_space_between();
				width: 100%;
				margin-top: 10rpx;

				::v-deep .u-tabs__wrapper__nav {
					width: 90vw;
				}

				::v-deep .u-tabs__wrapper__nav__item__text {
					font-size: 30rpx;
				}

			}
		}

		.search-placeholder {
			width: 100%;
			height: 60rpx;
			background-color: #cfd9f9;
			font-size: 28rpx;
			color: #325EF5;
			text-align: center;
			line-height: 60rpx;
		}

		.scroll-Y {
			padding: 0 28rpx 40rpx 28rpx;
			height: 95vh;

			.item {
				margin-top: 20rpx;
				height: 642rpx;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 20rpx;
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.item-top {
					.inline_space_between();

					& text:nth-child(2) {
						font-size: 30rpx;
						color: #28C445;
						font-weight: bold;
					}
				}

				.item-name,
				.item-type {
					font-size: 30rpx;
					color: #325EF5;
				}

				.item-time {
					.inline_space_between();

					text:nth-child(2) {
						color: #325EF5;
					}
				}

				.item-imgs {
					display: flex;

					image {
						width: 94rpx;
						height: 94rpx;
						margin-right: 16rpx;
					}
				}

				.item-btn {
					display: flex;
					justify-content: flex-end;

					button {
						margin: 0 20rpx;
						width: 240rpx;
						height: 64rpx;
						line-height: 64rpx;
						border-radius: 12rpx;
					}

					button:nth-child(1) {
						background-color: #fff;
						border: 1px solid #325ef5;
						color: #325ef5;
					}

					button:nth-child(2) {
						background-color: #325ef5;
						border: 1px solid #325ef5;
						color: #fff;
					}

					.change-ok {
						opacity: 0.5;
					}
				}

			}
		}

		.uni-list {
			height: 80rpx;
		}
	}
</style>